<template>
	<view class="popup-list-box">
		<uni-search-bar class='popup-search' :placeholder="placeholder" @input='search'>
		</uni-search-bar>
		<view class="list">
			<uni-list class="popup-list" :border="false">
				<uni-list-item :border="false" :title="item[keyName]" :key="index" clickable
					v-for="(item, index) in searchList" @click="onClick(index, item)" />
			</uni-list>
		</view>

	</view>
</template>

<script>
	/**
	 * DataChecklist 带搜索的列表
	 * @description 依赖 uni-ui 的 uni-search-bar、uni-list 和 uni-list-item 组件
	 * 
	 * @property {Array} list 渲染的列表数据 ，格式 [{text:'',value:''}]
	 * @property {Array} otherList 额外的列表数据，当搜索结果为空时，可以选择展示该列表的数据 ，格式 [{text:'',value:''}]
	 * @property {Boolean} inputBorder 是否显示input输入框的边框（默认true）
	 * @property {String} placeholder 输入框的提示文字
	 * @property {String} primaryColor 主题色
	 * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
	 * 
	 * @event {Function} click  点击列表项触发
	 * @event {Function} confirm  点击确定按钮触发
	 * @event {Function} cancel  点击取消按钮触发
	 * @event {Function} clear 点击清除按钮触发
	 * @event {Function} change 内容变化触发
	 */
	export default {
		name: "popup-list",
		data() {
			return {
				searchList: []
			};
		},
		props: {
			placeholder: {
				type: String,
				default: '请输入搜索内容'
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			otherList: {
				type: Array,
				default () {
					return []
				}
			},
			keyName: {
				type: String,
				default: 'text'
			}
		},
		watch: {
			value(newValue, oldValue) {
				this.$emit('change', newValue)
			},
			list: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {
						this.searchList = val
					}
				}
			},
			otherList: {
				immediate: true,
				handler(val, old) {
					if (Array.isArray(val) && old !== val) {

					}
				}
			},
			searchList(val, old) {
				if (val.length === 0) {
					this.searchList = this.otherList
				}
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.searchList = this.list
			},
			search(e) {
				console.log(e, 'e');
				if (e) {
					this.searchList = this.list.filter((i) => {
						if (i && i[this.keyName]) {
							return this.fuzzyMatch(i[this.keyName], e)
						}
					})
					if (this.searchList.length == 0) {
						this.searchList = this.otherList
					}
				} else {
					this.searchList = this.list
				}
			},
			onClick(index, item) {
				this.$emit('click', item)
			},

			// 模糊匹配
			fuzzyMatch(str, key) {
				let index = -1,
					flag = false;
				for (var i = 0, arr = key.split(""); i < arr.length; i++) {
					//有一个关键字都没匹配到，则没有匹配到数据
					if (str.indexOf(arr[i]) < 0) {
						break;
					} else {
						let match = str.matchAll(arr[i]);
						let next = match.next();
						while (!next.done) {
							if (next.value.index > index) {
								index = next.value.index;
								if (i === arr.length - 1) {
									flag = true
								}
								break;
							}
							next = match.next();
						}

					}
				}
				return flag
			}
		}

	}
</script>

<style scoped lang="scss">
	.popup-list-box {
		border: 0px solid red;
		height: 80vh;
		background-color: #fff;

		.popup-search {
			height: 10vw;
		}

		.popup-list {
			overflow-y: scroll;
			border: 0px solid blue;
			height: calc(80vh - 20vw);
		}
	}
</style>
